<style lang="scss" scoped>
.box{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  .content{
    position: absolute;
    width: 100vw;
    top: 0;
    left: 0;
    .item{
      text-align: center;
    }
  }
}

</style>

<template>
  <div class="box" @scroll="scroll"> 
    <div class="plant" :style="{height:config.totalHeight+'px'}"> 
    </div>
    <div class="content" :style="{transform:`translateY(${scrollTopRef}px)`}">
      <div v-for="item in renderData" :key="item.id" class="item" :style="{height:itemHeight+'px',borderBottom:'1px solid #ccc'}">
        {{ item.id }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive,ref } from 'vue';

// 可视区高度
const clientHeight = document.documentElement.clientHeight;
// 内容每一条的高度
const itemHeight=60;
const clientItemCount=Math.ceil(clientHeight/itemHeight);

const sourceData=new Array(100).fill(0).map((_,i)=>{
  return{id:i+1}
});

const renderData=computed(()=>{
  return sourceData.slice(config.startIndex,config.endIndex)
})


const config=reactive({
  startIndex:0,
  endIndex:0,
  totalHeight:0
})
const scrollTopRef=ref(0);

const scroll=(e:any)=>{
  const scrollTop=e.target.scrollTop;
  config.startIndex=Math.floor(scrollTop/itemHeight);
  config.endIndex=config.startIndex+clientItemCount;
  scrollTopRef.value=config.startIndex*itemHeight;
}

onMounted(()=>{
  
  // 总高度
  config.totalHeight=sourceData.length*itemHeight;

  config.endIndex=config.startIndex+clientItemCount;

})
</script>





































<!-- <template>
  <div>
    <video ref="video" autoplay playsinline></video>
    <button @click="startCamera">启动相机</button>
    <button @click="takePhoto">拍照</button>
    <canvas ref="canvas"></canvas>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
export default defineComponent({
  // name: 'Camera',
  setup() {
    const video = ref<HTMLVideoElement | null>(null);
    const canvas = ref<HTMLCanvasElement | null>(null);
    let stream: MediaStream | null = null;
    const startCamera = async () => {
      try {
        stream = await navigator.mediaDevices.getUserMedia({ video: true });
        if (video.value) {
          video.value.srcObject = stream;
        }
      } catch (err) {
        console.error('无法访问摄像头', err);
      }
    };
    const takePhoto = () => {
      if (canvas.value && video.value) {
        const context = canvas.value.getContext('2d');
        if (context) {
          const dimensions = video.value.getBoundingClientRect();
          canvas.value.width = dimensions.width;
          canvas.value.height = dimensions.height;
          context.drawImage(video.value, 0, 0, dimensions.width, dimensions.height);
          //将图片转换为base64字符串
          const dataUrl = canvas.value.toDataURL('image/png');
          console.log('照片已保存:', dataUrl);
          //这里可以调用函数上传图片到服务器
        }
      }
    };
    onMounted(() => {
      // 可以在这里初始化一些东西
    });
    onBeforeUnmount(() => {
      if (stream) {
        stream.getTracks().forEach(track => track.stop());
      }
    });
    return {
      video,
      canvas,
      startCamera,
      takePhoto
    };
  }
});
</script>-->


<!-- <template>
  <div>
    <h2>父组件</h2>
    <child :message="parentMessage" @son-name="handleName">
      <template>
        12345
      </template>
    </child>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import child from '@/components/child.vue';

const parentMessage =ref('Hello from parent component!')
const handleName = () => {
  parentMessage.value += ` 张满欣`
}

</script> --> 

